import React from 'react';
import { Form, InputNumber, Button, Select, message } from 'antd';
import { connect } from 'react-redux';
import Api from 'Utils/api';
import CREDIT_LEVEL from 'Constants/creditConstant';
import EqualBorder from './../../../CommonComponents/EqualBorder';
import './index.scss';

const FormItem = Form.Item;
const Option = Select.Option;
class Profession extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      creditData1: [],
      creditData2: [],
      creditData3: [],
      isLoading: false
    };
    this.filterCredit = ::this.filterCredit;
    this.initCredit = ::this.initCredit;
    this.returnLevel = ::this.returnLevel;
  }
  componentWillMount() {
    this.initCredit();
  }
  initCredit() {
    const api = new Api({
      method: 'GET',
      path: '/enterprises/credit',
      success: (res) => {
        const data = res.length > 0 ? res : [];
        this.setState({
          creditData1: data.length > 0 ? this.filterCredit(data, CREDIT_LEVEL.CAUTION) : [],
          creditData2: data.length > 0 ? this.filterCredit(data, CREDIT_LEVEL.EARLY_WARN) : [],
          creditData3: data.length > 0 ? this.filterCredit(data, CREDIT_LEVEL.GIVE_WARN) : [],
        });
      },
      error: (msg) => {
        message.error(msg);
      }
    });
    api.run();
  }
  filterCredit(data, level) {
    return data.filter(item => item.level === level);
  }
  renderOption(creditData) {
    const nodeInfo = [];
    for (let i = 0, len = creditData.length; i < len; i++) {
      nodeInfo.push((
        <Option key={creditData[i].dispose}>{creditData[i].dispose}</Option>
      ));
    }
    return nodeInfo;
  }
  handleSure() {
    this.props.form.validateFieldsAndScroll((err) => {
      if (!err) {
        const formValue = this.props.form.getFieldsValue();
        const list = [];
        for (let i = 0; i < 3; i++) {
          const item = {
            level: this.returnLevel(i),
            min: formValue[`min${i + 1}`],
            max: formValue[`max${i + 1}`],
            dispose: formValue[`dispose${i + 1}`],
          };
          list.push(item);
        }
        this.setState({ isLoading: true });
        const api = new Api({
          method: 'PUT',
          path: '/enterprises/credit',
          data: {
            list
          },
          success: (res) => {
            console.log(res);
            this.setState({
              isLoading: false
            });
          },
          error: (msg) => {
            message.error(msg);
            this.setState({
              isLoading: false
            });
          }
        });
        api.run();
      }
    });
  }
  returnLevel(index) {
    if (index === 0) {
      return CREDIT_LEVEL.CAUTION;
    }
    if (index === 1) {
      return CREDIT_LEVEL.EARLY_WARN;
    }
    return CREDIT_LEVEL.GIVE_WARN;
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    const { creditData1, creditData2, creditData3 } = this.state;
    return (
      <div className="profession-container" >
        <EqualBorder
          title="企业信用评价"
          content={
            <div>
              <div className="profession-body">
                <div className="body-title">
                  信用等级
                </div>
                <div className="part-two">
                  <div className="form-title" style={{ color: '#FFE218' }}>
                    预警
                  </div>
                  <Form className="form-two">
                    <div>
                      <div className="label">
                        分值：
                      </div>
                      <FormItem>
                        {getFieldDecorator('min1',
                          { initialValue: creditData1.length > 0 ? creditData1[0].min : 0,
                            rules: [
                              { required: true, message: '请输入' }
                            ]
                          }
                        )(
                          <InputNumber size="100" />
                        )}
                      </FormItem>
                      <div className="reach">
                        到
                      </div>
                      <FormItem>
                        {getFieldDecorator('max1',
                          { initialValue: creditData1.length > 0 ? creditData1[0].max : 0,
                            rules: [
                              { required: true, message: '请输入' }
                            ]
                          })(
                            <InputNumber size="100" />
                        )}
                      </FormItem>
                    </div>
                    <div>
                      <div className="label">
                        处置措施：
                      </div>
                      <FormItem>
                        {getFieldDecorator('dispose1', {
                          initialValue: creditData1.length > 0 ? creditData1[0].dispose : '',
                          rules: [
                            { required: true, message: '请选择' }
                          ]
                        })(
                          <Select placeholder="请选择" style={{ width: 450 }}>
                            {
                              creditData1 && creditData1.length > 0 ? this.renderOption(creditData1) : ''
                            }
                          </Select>
                        )}
                      </FormItem>
                    </div>
                  </Form>
                </div>
                <div className="part-two">
                  <div className="form-title" style={{ color: '#FF5400' }}>
                    警示
                  </div>
                  <Form className="form-two">
                    <div>
                      <div className="label">
                        分值：
                      </div>
                      <FormItem>
                        {getFieldDecorator('min2', {
                          initialValue: creditData2.length > 0 ? creditData2[0].min : 0,
                          rules: [
                            { required: true, message: '请输入' }
                          ]
                        })(
                          <InputNumber size="100" />
                        )}
                      </FormItem>
                      <div className="reach">
                        到
                      </div>
                      <FormItem>
                        {getFieldDecorator('max2', {
                          initialValue: creditData2.length > 0 ? creditData2[0].max : 0,
                          rules: [
                            { required: true, message: '请输入' }
                          ]
                        })(
                          <InputNumber size="100" />
                        )}
                      </FormItem>
                    </div>
                    <div>
                      <div className="label">
                        处置措施：
                      </div>
                      <FormItem>
                        {getFieldDecorator('dispose2', {
                          initialValue: creditData2.length > 0 ? creditData2[0].dispose : '',
                          rules: [
                            { required: true, message: '请选择' }
                          ]
                        })(
                          <Select placeholder="请选择" style={{ width: 450 }}>
                            {
                              creditData2 && creditData2.length > 0 ? this.renderOption(creditData2) : ''
                            }
                          </Select>
                        )}
                      </FormItem>
                    </div>
                  </Form>
                </div>
                <div className="part-two">
                  <div className="form-title" style={{ color: '#FF0000' }}>
                    告警
                  </div>
                  <Form className="form-two">
                    <div>
                      <div className="label">
                        分值：
                      </div>
                      <FormItem>
                        {getFieldDecorator('min3', {
                          initialValue: creditData3.length > 0 ? creditData3[0].min : 0,
                          rules: [
                            { required: true, message: '请输入' }
                          ]
                        })(
                          <InputNumber size="100" />
                        )}
                      </FormItem>
                      <div className="reach">
                        到
                      </div>
                      <FormItem>
                        {getFieldDecorator('max3', {
                          initialValue: creditData3.length > 0 ? creditData3[0].max : 0,
                          rules: [
                            { required: true, message: '请输入' }
                          ]
                        })(
                          <InputNumber size="100" />
                        )}
                      </FormItem>
                    </div>
                    <div>
                      <div className="label">
                        处置措施：
                      </div>
                      <FormItem>
                        {getFieldDecorator('dispose3', {
                          initialValue: creditData3.length > 0 ? creditData3[0].dispose : '',
                          rules: [
                            { required: true, message: '请选择' }
                          ]
                        })(
                          <Select placeholder="请选择" style={{ width: 450 }}>
                            {
                              creditData3 && creditData3.length > 0 ? this.renderOption(creditData3) : ''
                            }
                          </Select>
                        )}
                      </FormItem>
                    </div>
                  </Form>
                </div>
              </div>
              <div className="btn-wrap">
                <Button className="ok-btn" onClick={this.handleSure.bind(this)} loading={this.state.isLoading}>确定</Button>
              </div>
            </div>
          }
        />
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    ...state.routing
  };
}
export default Form.create()(connect(mapStateToProps)(Profession));

